<template>
  <div class="details-container">
    <!-- 左边 -->
    <el-card class="left-box-card">
      <h1>{{ article.title }}</h1>
      <div class="author" v-if="article.user">
        <div class="left">
          <div class="avatar" @click="$router.push({name: 'User', params: { user_id: `${article.user_id}` }})">
          <el-avatar
            :size="42"
            :src="article.user.avatar"
          ></el-avatar>
          </div>
          <ul>
            <div @click="$router.push({name: 'User', params: { user_id: `${article.user_id}` }})" >
              <b><a>{{ article.user.nickname }}</a></b>
            </div>
            <li>
              <span>{{ article.createdAt | time}}</span>
            </li>
            <li>
              <span>·</span>
            </li>
            <li>阅读 {{ article.read_count }}</li>
          </ul>
        </div>
        <div class="right bg">
          <el-button type="primary" plain size="small" @click="wage(article.user_id)">{{!isWage ? '+ 关注' : '✓ 取消关注'}}</el-button>
        </div>
      </div>
      <!-- 内容区域 -->
      <div class="content " >
        <p v-html="article.content"> </p>
      </div>
      <!-- 评论区域 -->
      <Comment ref="comment" id="comment" :article_id="article.id" @updateContent="getArticleId()" />
      <!-- 左侧固定区域 -->
      <Suspension :article="article" @refresh="getArticleId"/>
    </el-card>
    <!-- 右边 -->
    <div class="right-container">
      <Right />
    </div>
    <!-- 回到顶部 -->
    <el-backtop target="#app"></el-backtop>
  </div>
</template>

<script>
import Right from '@/views/Right' // 右侧
import Comment from '@/views/details/comment' // 评论组件
import Suspension from '@/views/details/Suspension'
import { getArticleId } from '@/api/article'
import { addUserFollowings, deleteUserFollowings, isWage } from '@/api/user'
export default {
  // name: 'Details',
  components: {
    Right,
    Comment,
    Suspension
  },
  data () {
    return {
      article: {},
      isWage: false, // 是否关注
      articleId: this.$route.params.article_id // 文章当前id
    }
  },
  watch: {
    '$route' (to, from) { // 监听路由是否变化
      if (to.params.article_id != from.params.article_id) {
		   this.articleId = to.params.article_id
        this.getArticleId()
      }
    }
  },
  created () {
    if (this.$route.params.article_id) {
      this.getArticleId()
    }
  },
  methods: {
    // 是否关注
    async isWagee () {
      const res = await isWage(this.article.user_id)
      if (res) {
        this.isWage = true
      }
    },
    // 点击关注按钮
    async wage (id) {
      if (this.isWage == false) {
        const res = await addUserFollowings({ follerd_id: this.article.user_id })
        if (res) {
          this.isWage = true
        }
      } else {
        const res = await deleteUserFollowings(this.articleId)
        this.isWage = false
      }
    },
    // 根据文章id获取文章信息
    async getArticleId () {
      const article = await getArticleId(this.articleId)
      this.article = article
      this.isWagee()// 是否关注该篇文章的作者
      this.$refs.comment.getCommentList() // 调用子组件方法刷新评论
    }
  }
}
</script>
<style lang="scss" scoped>
.details-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;;
  width: 1166px;
}
// 左边盒子
  .left-box-card {
    width: 100%;
    // width: 815px;
     border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 8px 0px rgba(122 192 241 / 30%);
    // 内容样式处理
    ::v-deep.content {
         p {
        line-height: 30px;
      }
      // 代码块
      pre{
        background-color: rgb(58, 45, 73);
        border-radius: 5px;
        padding: 15px;
        position: relative;
      }
      code{
        color: rgb(255, 255, 255);
      }
      // 引用
      blockquote{
        border-left: 5px solid #edf2fc;
    border-radius: 2px;
    color: #606266;
    margin: 10px 0;
    padding-left: 1em;
      }
      img {
        max-width: 100%;
        border-radius: 5px;
        // background:#3b3d41;
        margin: 10px 0px;
        box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 10%);
      }
    }
    .author {
      display: flex;
      justify-content: space-between;
      // padding: 15px 0 23px 0;
      .left {
        .avatar{cursor:pointer;  }
        display: flex;
        ul {
          margin: 3px 0px 10px 0px;
          margin-left: 10px;
          div {
            font-size: 16px;
            margin-bottom: 5px;
            color: #3b3d41;
          }
          li {
            margin-right: 5px;
            float: left;
            color: #8a919f;
            list-style-type: none;
            font-size: 14px;
            font-weight: 500;
            span {
              letter-spacing: 1px;
            }
          }
        }
      }
      // .right {
      //   text-align: right;
      // }
    }
  }
</style>
